<template>
  <div class="page">
    <el-form :model="form" ref="form">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>指导专家表</span>
        </div>
        <div>
          <p class="p_title margin">申报者须请了解其科研活动情况及个性特点的辅导教师分别填写此表格（建议使用电脑填写并打印），并在指定位置签名确认：如需附页，置于本表后，附页上亦须手写签名。</p>
          <p class="p_title margin">辅导教师填写前须认真审阅学生填写的《研究项目》和《个人陈述》。本表首页须加盖辅导教师所在单位公章。</p>
          <p class="p_title margin">申报者将填写完整的表格扫描上传至申报系统，完成提交。同时在申报系统中按顺序添加所有辅导教师的相关信息，并保证与此表上的信息一致。自制申报表无效，不接受以电子邮件或传真方式提交的申报表。</p>
        </div>
        <div class="table">
          <h2>第十八届“明天小小科学家”奖励活动</h2>
          <h4>申报表六：指导专家表（选填）</h4>
          <div class="table_grounp">
            <h4>1.请简述该学生通过什么方式联系到您并获得您的指导帮助，如果您或您的团队其他成员与该学生有私人关系，请说明。</h4>
            <el-form-item prop='question1'>
              <el-input
              :maxlength="500"
              type="textarea"
              :autosize="{ minRows: 10, maxRows: 20}"
              v-model="form.question1"/>
              <span class="length">{{question1}}/500</span>
            </el-form-item>
          </div>
          <div class="table_grounp">
            <h4>2.该学生的研究项目选题是如何产生的？（例如，是被指定安排的、从一个选题清单中自选的、选题源自专家的讨论、选题源自学生参加的一份实验室的工作、选题由学生自己提出等。）</h4>
            <el-form-item prop='question2'>
            <el-input 
              type="textarea"
              :maxlength="500"
              :autosize="{ minRows: 10, maxRows: 20}" 
              v-model="form.question2"/>
              <span class="length">{{question2}}/500</span>
            </el-form-item>
          </div>
          <div class="table_grounp">
            <h4>3.该学生的研究工作是否是一个研究科研项目的一部分？如果是，该研究组有多大，是一个什么样的研究组（学生还是专业研究人员）？该学生在研究组中的作用或角色是什么？如果研究组中有其他高中生，该学生的工作与他（们）之间有何不同？</h4>
            <el-form-item prop='question3'>
            <el-input 
              type="textarea"
              :maxlength="500"
              :autosize="{ minRows: 10, maxRows: 20}"
              v-model="form.question3"/>
              <span class="length">{{question3}}/500</span>
            </el-form-item>
          </div>
          <div class="table_grounp">
            <h4>4.该学生在研究过程中是如何工作的？研究工作的哪部分是由该学生自己完成的，哪部分接受了帮助？（例如，实验设计、工艺的选择、特殊工具设备的使用、设备的制作、数据的收集、结论推导等。）</h4>
            <el-form-item>
            <el-input 
              type="textarea"
              :maxlength="500"
              :autosize="{ minRows: 10, maxRows: 20}"
              v-model="form.question4"/>
              <span class="length">{{question4}}/500</span>
            </el-form-item>
          </div>
          
          <h4 style="font-size:16px;">
            我确认上述内容属实。
          </h4>
          <div class="form">
            <div class="form_box tutbox">
              <div>
                <span>指导教师姓名：</span><input type="text" class="width50"  v-model="form.mentorName">
                <span>学位：</span><input type="text" class="width50" v-model="form.degree">
                <span>学历：</span><input type="text" class="width50" v-model="form.education">
                <span>专业：</span><input type="text" class="width50" v-model="form.professional">
                <span>职称：</span><input type="text" class="width50" v-model="form.title">
              </div>
              <div>
                <span>工作单位：</span><input type="text" style="width:200px;" v-model="form.workUnit">
                <span>通讯地址：</span><input type="text" style="width:200px;" v-model="form.address">
                
              </div>
              <div>
                <span>电子邮箱：</span><input type="text" class="width70" v-model="form.email">
                <span>移动电话：</span><input type="text" class="width70" v-model="form.mobile">
                <span>工作电话：</span><input type="text" class="width70" v-model="form.officephone">
              </div>
              <div>
                <span>指导教师签名（手写）</span><input disabled type="text" class="width20">
                <span>日期（手写）</span><input disabled type="text" class="width20">
                <span>年</span><input disabled type="text" class="width20">
                <span>月</span><input disabled type="text" class="width20">
                <span>日</span>
              </div>
              <div>
                <span>单位（盖章）</span><input disabled type="text" class="width20">
              </div>
            
            </div>
            
          </div>
          <div style="text-align:center; margin:20px 0;">
            <el-button @click="pevs" type="primary" size="mini">上一步</el-button>
            <el-button @click="save" type="primary" size="mini">保存</el-button>
            <el-button @click="nexts" type="primary" size="mini">下一步</el-button>
            <div style="font-size:14px; margin-top:20px;">
              <small>请先保存再进行下一步操作</small>
            </div>
          </div>
        </div>
      </el-card>
    </el-form>
  </div>
</template>

<script type="text/ecmascript-6">
import { pev, next } from "@/function/pevNext/pevNext.js";
import { mentor } from "@/function/formTable/formTable.js";
import { get_mentor } from "@/function/formTable/getFormTable.js";
export default {
  computed: {
    question1() {
      return this.form.question1 !== null ? this.form.question1.length : 0;
    },
    question2() {
      return this.form.question2 !== null ? this.form.question2.length : 0;
    },
    question3() {
      return this.form.question3 !== null ? this.form.question3.length : 0;
    },
    question4() {
      return this.form.question4 !== null ? this.form.question4.length : 0
    }
  },
  mounted() {
    get_mentor(this);
  },
  data() {
    return {
      required: true,
      form: {
        question1: " ",
        question2: " ",
        question3: " ",
        question4: " ",
        mentorName: " ",
        education: " ",
        degree: " ",
        professional: " ",
        title: " ",
        workUnit: " ",
        address: " ",
        email: " ",
        mobile: " ",
        officephone: " "
      }
    };
  },
  methods: {
    pevs() {
      pev(this);
    },
    nexts() {
      next(this);
    },
    save() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          mentor(this.form, this);
        } else {
          alert("error");
          return false;
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
